<template>
  <div class="rightview">
    <div class="rightTitle">
      智能巡查情况
    </div>
    <div>
      <div class="imgList" v-for="(item,index) in imgList" :key="index">
        <img :src="require('../../assets/img/ic'+item.st+'.png')">
        <!-- <p style="color: #FFFFFF;">{{item.Num}}</p> -->
          <p v-show="numShow">
            <countTo :startVal='0' ref="count" :autoplay="autoFlag" separator='' :endVal='item.Num' :duration='900000'></countTo>
          </p>
        <a>{{item.Result}}</a>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    PlatformIssues
  } from "../../request/api"
  import countTo from '../../common/vue-count/vue-countTo';
  export default {
    props:['SetFlag'],
    data() {
      return {
        imgList: 11,
        numShow:false,
        autoFlag:false,
      };
    },
    components: {
      countTo
    },

    created() {
      this.GetPlatformIssues()
      // setTimeout(()=>{

      // },3000)
    },
    methods: {
      GetPlatformIssues() {
        PlatformIssues({
          code: 'all',
          AppId: this.$getParams('appid'),
          EBCOrganizationId: '',
          UserId: this.$getParams('userid')
        }).then((res) => {
          console.log(res)
          setTimeout(()=>{
            this.imgList = res.SCater.Data.PlatformIssues_A;
            let tempArr=[]
            this.imgList.forEach((item,index)=>{
              if(item.Result == '未戴帽子' || item.Result == '未戴口罩'){ 
                tempArr.push(index)
              }
            })
            tempArr.forEach((item)=>{
              console.log()
              this.imgList.unshift(this.imgList[item])
              this.imgList.splice(item+1,1)
            })
            
            let arr2 = [
              {Num:0,Result:"卫生环境欠佳"},
              {Num:0,Result:"砧板混用"},
              {Num:0,Result:"无健康证人员"},
              {Num:0,Result:"挡鼠板移位"},
              {Num:0,Result:"嬉笑打闹"}
            ]
            this.imgList = this.imgList.concat(arr2)
            console.log(this.imgList)
            this.imgList.forEach((i)=>{
              i.Num = 0
            })
            
            this.imgList.forEach((i)=>{
              i.st = Math.floor(Math.random() * 12) + 1
            })
            this.numShow = true
          },10)
        })
      }
    },
    watch:{
      SetFlag(e){
        this.autoFlag = true
        console.log(this.autoFlag)
        this.imgList.forEach((i)=>{
          if(i.Result == '未戴帽子'){
            i.Num = 231
          }else if(i.Result == '未戴口罩'){
            i.Num = 131
          }else{
            i.Num = 0
          }
        })

      }
    }
  };
</script>

<style>
  .rightview {
    position: absolute;
    right: 3px;
    width: 330px;

  }

  .imgList {
   width: 138px;
   height: 80px;
    float: left;
    position: relative;
  }
.imgList img{
  width: 138px;
  height: 80px;
}
  .imgList p {
    position: absolute;
    top: 16px;
    display: block;
    width: 93%;
    text-align: center;
    font-size: 25px;
    color: #FFFFFF;
  }

  .imgList a {
    position: absolute;
    top: 50px;
    left: -4px;
    width: 100%;
    color: #ffffff;
    text-align: center;
    font-size: 17px;
  }

  .rightTitle {
    wdith: 298px;
    height: 43px;
    color: hsla(181, 100%, 53%, 1);
    text-align: left;
    padding-left: 20px;
    line-height: 43px;
    background: url(../../assets/img/titleb.png) no-repeat;
  }
</style>
